<template>
  <a-drawer :width="688" :visible="visible" class="role-add-wrap" @ok="handleSubmit" @cancel="handleCancel">
    <template #header>
      <div class="closed" @click="handleClosed"><icon-close /></div>
      <span class="title">{{title}}</span>
    </template>
    <a-form ref="formRef" :model="ruleForm" class="report-form" :rules="Rules">
      <a-form-item field="role_name" label="角色名称" label-col-flex="80px">
        <a-input v-model="ruleForm.role_name" />
      </a-form-item>
      <a-form-item field="switch" label="角色状态" label-col-flex="80px">
        <a-switch v-model="ruleForm.status" />
      </a-form-item>
      <a-form-item field="order" label="排序" label-col-flex="80px">
        <a-input-number v-model="ruleForm.order" :style="{width:'104px'}" placeholder="请输入">
          <!-- <template #suffix>
            <icon-minus />
          </template> -->
        </a-input-number>
      </a-form-item>
      <a-form-item field="role_desc" label="角色描述" label-col-flex="80px">
        <a-textarea
          placeholder="请输入"
          v-model="ruleForm.role_desc"
          allow-clear
          show-word-limit
          max-length="400"
          class="textarea-input"
        />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import type { addRoleItem } from '@/api/roleManagement/roleManagement_type';
import { addRole, editRole, getRoleInfo } from '@/api/roleManagement/roleManagement';
import { Message } from '@arco-design/web-vue';
const visible = ref(true);
const ruleForm = ref<addRoleItem>({
  role_id: 0,
  role_name: '',
  status: false,
  order: 1,
  role_desc: ''
});
const title = ref('新增角色');
const drawer = ref(false);
const formRef = ref(null);
const props = defineProps({
  handleType: String,
  visibale: Boolean,
  id: Number
});
watch(
  () => props.handleType,
  (newVal: any) => {
    if (newVal === 'add') {
      title.value = '新增角色';
    } else {
      title.value = '编辑角色';
    }
  }
);
watch(
  () => props.visibale,
  (newVal) => {
    console.log(newVal)
    drawer.value = newVal;
  }
);
watch(() => props.id, () => {
  if(props.id != -1) {
    getUserInfo();
  }
});
const emit = defineEmits(['onClose']);
const Rules = {
  role_name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
};
/**
 * @method 获取详情
 */
const getUserInfo = () => {
  getRoleInfo({ role_id: props.id }).then((res) => {
    ruleForm.value = res.data;
  });
};
/**
 * 提交
 */
const handleSubmit = () => {
  formRef.value.validate().then((rs: any) => {
    if (!rs) {
      if (props.handleType == 'add') {
        const org_code = 100
        addRole({ ...ruleForm.value, org_code}).then((res) => {
          if (res.code === 200) {
            Message.success('创建成功');
            handleClosed()
          } else {
            Message.error(res.message)
          }
        });
      } else {
        editRole({
          ...ruleForm.value,
          status: ruleForm.value.status ? 1 : 2,
          role_id: ruleForm.value.id
        }).then((res) => {
          if (res.code === 200) {
            Message.success('编辑成功');
            handleClosed()
          } else {
            Message.error(res.message)
          }
        });
      }
    }
  });
};
const handleCancel = () => {
  handleClosed();
};
const handleClosed = () => {
  ruleForm.value = {
      role_id: 0,
      role_name: '',
      status: false,
      order: 1,
      role_desc: ''
    }
  emit('onClose', false);
};
</script>
<style lang="less">
.role-add-wrap {
  .arco-drawer {
    height: calc(100vh - 16px);
    margin: 8px 8px 8px 0;
    border-radius: 8px;
    .closed {
      .arco-icon {
        color: #A3B0CC;
      }
    }
    .arco-drawer-body {
      padding-right: 36px;
    }
    .arco-drawer-footer {
      border-top: 0!important;
    }
  }
}
.arco-input-wrapper, .arco-select-view-single, .arco-picker, .arco-textarea{
  background: #fff;
  border: 1px solid #D3DBEB;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.closed {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-size: 18px;
  background: #fff;
  cursor: pointer;
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: #394D73;
  margin-left: 12px;
}
.textarea-input {
  height: 167px;
}
:deep(.arco-form-item-label) {
  font-weight: 400;
  color: #465A80;
}
</style>